<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 4.4
      function ajax(options) {
        // 2.9 默认参数
        var defaults = {
          type: 'get',
          url: '',
          data: {},
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success() {},
          error() {}
        }
        // 2.9-1.4 使用options对象中的属性覆盖defaults对象中的属性
        Object.assign(defaults, options)

        // 2.3-4.2 创建ajax对象
        var xhr = new XMLHttpRequest()
        // 2.4-5.2-1.1 创建拼接请求参数的变量
        var params = ''
        for (var attr in defaults.parameters) {
          // 将参数转换为字符串格式
          params += `${attr}=${defaults.parameters[attr]}&`
        }
        params = params.substr(0, params.length - 1)

        // console.log(params);

        // 2.4-5.3 判断请求方式，
        if (defaults.type == 'get') {
          defaults.url = defaults.url + '?' + params
        }

        // 2.3-4.5
        xhr.open(defaults.type, defaults.url)

        // 2.3-4.6
        // xhr.send();
        // 2.4-5.4 如果是post请求
        if (defaults.type == 'post') {
          // 2.6-1.4
          var contentType = defaults.header['Content-Type']
          // 2.6-1.2
          xhr.setRequestHeader('Content-Type', contentType)
          // 2.6-1.4
          if (contentType == 'application/json') {
            console.log('defaults.data', defaults.parameters)
            xhr.send(JSON.stringify(defaults.parameters))
          } else {
            xhr.send(params)
          }
        } else {
          xhr.send()
        }

        // 2.3-4.7
        // 监听xhr对象下面的onload事件，当xhr对象接收完响应数据后厨房
        xhr.onload = function () {
          // 2.3-4.9-2,2.3-4.9-3
          // options.success(xhr.responseText);

          // c25  2.8-3.3 看一下当前响应的数据类型是什么
          let res1 = xhr.getResponseHeader('Content-Type')
          console.log('res1', res1)
          var responseText = xhr.responseText
          // 如果响应类型中，包含json
          if (res1.includes('application/json')) {
            responseText = JSON.parse(responseText)
          }

          // 2.7 完善-2.2
          if (xhr.status == 200) {
            defaults.success(responseText, xhr)
          } else {
            defaults.error(responseText, xhr)
          }
        }
      }

      ajax({
        // 请求方式2.3-4.3-1
        type: 'get',
        //2.3- 4.3-2
        url: 'http://localhost:3000/responseDate',
        // 2.4-5.1 请求参数
        parameters: {
          name: 'zhangsan',
          age: 20
        },
        // 2.6-1.1
        header: {
          // 'Content-Type':'application/x-www-form-urlencoded',
          // 2.6-1.3
          'Content-Type': 'application/json'
        },
        // 2.3-4.9-1
        // 2.5 因为多给了一个xhr，所以在方法的形参中，要添加一个形参接受实参
        success: function (data, xhr) {
          console.log('success', data)
          console.log(xhr)
        },
        // 2.7完善--2.3 记得下面在ajax实参里面error方法；
        // 2.7-2.5 因为多给了一个xhr，所以在方法的形参中，要添加一个形参接受实参
        error: function (data, xhr) {
          console.log('这里是error', data)
          console.log(xhr)
        }
      })
    </script>
  </body>
</html>
